import { useState, useEffect } from 'react'
import { View } from '@tarojs/components'
import { AtSearchBar, AtIcon, AtTag } from 'taro-ui'
import Taro, { } from '@tarojs/taro'
import NavBar from '@/components/nav-bar/navBar'
import TopView from '@/components/top-view/index'
// import { querySearch, queryHot } from '@/models/search'
import './index.less'


export default function Index() {
    const [searchValue, setSearchValue] = useState('');
    const [searchHistory, setSearchHistory] = useState<string[]>([]);
    const [searchHot] = useState([]);
    // 删除历史记录
    const delHistory = (item: string) => {
        setSearchHistory(searchHistory.filter((i) => i !== item))
        Taro.setStorage({
            key: 'searchHistory',
            data: searchHistory.filter((i) => i !== item)
        })
    }
    const [showDel, setShowDel] = useState(false);
    // 搜索
    const goSearch = async () => {
        setSearchHistory([...searchHistory, searchValue])
        // const res = await querySearch({ key: searchValue })
        // console.log(res);
        Taro.setStorage({
            key: 'searchHistory',
            data: [...searchHistory, searchValue]
        })
        setSearchValue('')
    }
    useEffect(() => {
        // 获取历史记录
        Taro.getStorage({
            key: 'searchHistory',
        }).then((res) => {
            setSearchHistory(res.data)
        }).catch(() => {
            setSearchHistory([])
        })
        // 获取热门搜索
        // queryHot().then((res) => {
        //     setSearchHot(res.data)
        // })
    }, [])
    return (
        <TopView>
            <View>
                <NavBar title='搜索' renderLeft={<AtIcon onClick={() => Taro.navigateBack()} value='chevron-left' size='16' color='#666'></AtIcon>} />
                <AtSearchBar placeholder='搜索' value={searchValue} onChange={(val: string) => setSearchValue(val)} onActionClick={() => { goSearch() }} />
                <View className='search-content'>
                    {/* 历史 */}
                    {
                        searchHistory.length > 0 && <View className='search-history'>
                            <View className='search-history-title'>
                                <View style={{ fontSize: '18px' }}>搜索历史</View>
                                {
                                    showDel && <View>
                                        <AtTag type='primary' className='search-history-item' circle size='small' onClick={() => { setSearchHistory([]); setShowDel(false) }}>清空</AtTag>
                                        <AtTag type='primary' className='search-history-item' circle size='small' onClick={() => { setShowDel(false) }}>完成</AtTag>
                                    </View>
                                }
                                {
                                    !showDel && <AtIcon value='trash' onClick={() => { setShowDel(true) }} size='18' color='#666'></AtIcon>
                                }
                            </View>
                            <View className='search-history-list'>
                                {
                                    searchHistory.map((item, index) => {
                                        return (
                                            <AtTag type='primary' key={index + item} className='search-history-item' circle size='small'>{item} {showDel && <AtIcon onClick={() => { delHistory(item) }} value='close' size='12' />}</AtTag>
                                        )
                                    })
                                }
                            </View>
                        </View>
                    }
                    {/* 热搜 */}
                    {
                        searchHot.length > 0 && <View className='search-hot'>
                            <View className='search-hot-title' style={{ fontSize: '18px' }}>热搜</View>
                            <View className='search-hot-list'>
                                {
                                    searchHot.map((item: any, index) => {
                                        return (
                                            <AtTag type='primary' key={index} className='search-hot-item' circle size='small'>{item.keyWord}</AtTag>
                                        )
                                    })
                                }
                            </View>
                        </View>
                    }
                </View>
            </View>
        </TopView>
    )
}
